import BasicMapUtils from './BasicMapUtils'

const ol = window.ol

class FaceEarlyWarning extends BasicMapUtils {
  async initAll(options) {
    this.lineDate = options.lineDate
    this.lineGeometry = '' // 线的源数据
    this.markerLayer = ''
    this.position = ''
    this.markerData = options.markerData
    this.animating = false
    this.overlay = '' // 弹框layer
    await this.coordinateLineMethod()
    await this.addLine()
    await this.coordinateMarkerMethod()
    await this.addMarker()
    this.addMovementAnimation()
    // await this.drawRouteLine()
    this.mapView.animate({ zoom: 14 })
  }

  addLine() {
    this.lineDate.forEach(item => {
      const riverLineString = new ol.geom.LineString(item.path)
      // 百度转墨卡托
      this.coordTransform.convertGeoIntoMap(riverLineString)
      const lineParams = {
        lineArr: riverLineString.getCoordinates(),
        color: '#EFD000',
        width: 3
      }
      const lineObject = this.createLine({ ...lineParams })
      this.lineGeometry = lineObject.lineGeometry
      this.lineFeature = lineObject.lineFeature
      // 不能单独加--要和运动轨迹的点一个图层
      // this.map.addLayer(lineObject.lineLayer)
    })
  }

  coordinateLineMethod() {
    // 84转百度
    this.lineDate.forEach(item => {
      const arr = []
      item.path.forEach(value => {
        arr.push(this.coordTransform.wgs84tobd09(value[0], value[1]))
      })
      item.path = arr
    })
  }

  coordinateMarkerMethod() {
    // 84转百度
    this.markerData.forEach(item => {
      const arr = this.coordTransform.wgs84tobd09(item.center[0], item.center[1])
      item.center = arr
    })
  }

  addMarker() {
    this.markerData.forEach(item => {
      const centerPoint = new ol.geom.Point(item.center)
      this.coordTransform.convertGeoIntoMap(centerPoint)
      const icon = item.icon
      const markerParams = {
        x: centerPoint.getCoordinates()[0],
        y: centerPoint.getCoordinates()[1],
        icon,
        userData: item.userData,
        anchor: [0.5, 1]
      }
      const markerObject = this.createMarker({ ...markerParams })
      this.markerLayer = markerObject.markerLayer
      this.map.addLayer(markerObject.markerLayer)
      let overlay = ''
      this.map.on('click', e => {
        const feature = this.map.forEachFeatureAtPixel(e.pixel, feature => {
          return feature
        })
        overlay && overlay.setPosition(undefined)
        // console.log('1', overlay)
        if (feature) {
          if (feature.get('userData').type === 'marker') {
            overlay = this.createOverlay({
              htmlElement: document.querySelector('.warning-detail-pop'),
              position: e.coordinate
            })
            this.overlay = overlay
            this.map.addOverlay(overlay)
          }
        }
      })
    })
  }
  addGeoMaker() {
    this.position = new ol.geom.Point(this.lineGeometry.getCoordinates()[0])
    this.geoMarker = new ol.Feature({
      type: 'geoMarker',
      geometry: this.position
    })
    this.geoStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({ color: 'black' }),
        stroke: new ol.style.Stroke({
          color: 'white',
          width: 2
        })
      })
    })
    this.geoSource = new ol.source.Vector({
      features: [this.lineFeature, this.geoMarker]
    })
    this.geoLayer = new ol.layer.Vector({
      source: this.geoSource,
      style: feature => {
        // 当正在运动时隐藏初始位置标志点
        // if (this.animating && feature.get('type') === 'geoMarker') {
        //   return null
        // }
        if (feature.get('type') === 'geoMarker') {
          return null
        }
        return this.geoStyle
      }
    })
    this.map.addLayer(this.geoLayer)
  }
  addMovementAnimation() {
    this.addGeoMaker()
    const animationParams = {
      markerLayer: this.geoLayer,
      lineGeometry: this.lineGeometry,
      speed: 3,
      markerStyle: this.geoStyle,
      markerFeature: this.geoMarker,
      animating: false,
      id: 'animation-button'
    }
    this.createMovementAnimation({ ...animationParams })
  }
  // 修改弹框--为站点弹框
  setOverlay(value) {
    this.overlay.setElement(document.querySelector(value))
    // this.map.removeOverlay(this.overlay)
  }
  /*点线实时更新 */
  drawRouteLine() {
    let interval // 定时器对象
    let index = 0 // 拿索引值
    let route = [] // 线路坐标点
    const routeLength = this.lineDate[0].path.length // 线路总长
    // 定时器开始
    interval = setInterval(() => {
      index += 1
      if (index > routeLength) {
        // 拿完点就清空定时器
        clearInterval(interval)
        return
      }
      route.push(...this.lineDate[0].path.slice(index, index + 1))
      console.log('route', route)
      if (this.lineLayer) {
        this.map.removeLayer(this.lineLayer)
      }
      drowLine()
      drowMaker()
    }, 500)
    const drowLine = () => {
      const riverLineString = new ol.geom.LineString(route)
      // 百度转墨卡托
      this.coordTransform.convertGeoIntoMap(riverLineString)
      const lineParams = {
        lineArr: riverLineString.getCoordinates(),
        color: '#EFD000',
        width: 3
      }
      const lineObject = this.createLine({ ...lineParams })
      this.lineGeometry = lineObject.lineGeometry
      this.lineFeature = lineObject.lineFeature
      this.lineLayer = lineObject.lineLayer
      this.map.addLayer(this.lineLayer)
    }
    const drowMaker = () => {
      console.log('画点')
    }
  }
}

export default FaceEarlyWarning
